<template>
	<div class="user-massage">
		<!-- 弹窗区域 -->
		<el-dialog
			title="提示"
			:visible.sync="dialogVisible"
			width="50%"
			:before-close="handleClose"
		>
			<el-form
				ref="form"
				:rules="rules"
				:inline="true"
				:model="form"
				label-width="80px"
			>
				<!-- prop的值与字段名保持一致 -->
				<el-form-item label="姓名" prop="name">
					<el-input placeholder="请输入姓名" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input placeholder="请输入年龄" v-model="form.age"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="form.sex" placeholder="请选择">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="出生日期" prop="birth">
					<el-date-picker
						v-model="form.birth"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-mm-dd"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="地址" prop="addr">
					<el-input placeholder="请输入地址" v-model="form.addr"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 新增、搜索区域 -->
		<div class="manage-header">
			<el-button type="primary" @click="handleAdd">+ 新增</el-button>
			<el-form
				:model="searchForm"
				label-width="80px"
				:inline="true"
			>
				<el-form-item>
					<el-input
						placeholder="请输入姓名"
						v-model="searchForm.name"
					></el-input>
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSearch"
					>搜索</el-button
				>
			</el-form>
		</div>
		<!-- 用户列表区域 -->
		<div class="common-table">
			<el-table stripe :data="tableData" style="width: 100%" height="90%">
				<el-table-column prop="name" label="姓名"> </el-table-column>
				<el-table-column prop="sex" label="性别">
					<!-- 作用域插槽，可以在父组件获取子组件的数据 -->
					<!-- <template slot-scope="scope">
					<span>{{ scope.row.sex === 0 ? '男' : '女'}}</span>
				</template> -->
				</el-table-column>
				<el-table-column prop="age" label="年龄"> </el-table-column>
				<el-table-column prop="birth" label="出生日期"> </el-table-column>
				<el-table-column prop="addr" label="地址"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row)"
							>编辑</el-button
						>
						<el-button
							size="mini"
							type="danger"
							@click="handleDelete(scope.row)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<div class="pager">
				<el-pagination
					:page-size="10"
					layout="total, prev, pager, next"
					background
					:total="total"
					@current-change="handlePage"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import { getUser, addUser, editUser, delUser } from "../api"

export default {
	data() {
		return {
			dialogVisible: false,
			// 表单对象
			form: {
				name: "",
				age: "",
				sex: "",
				birth: "",
				addr: "",
			},
			rules: {
				name: [{ required: true, message: "请输入姓名" }],
				age: [{ required: true, message: "请输入年龄" }],
				sex: [{ required: true, message: "请输入性别" }],
				birth: [{ required: true, message: "请选择出生日期" }],
				addr: [{ required: true, message: "请输入地址" }],
			},
			tableData: [],
			modalType: 0, // 弹窗类型：0-新增，1-编辑
			total: 0,
			pageData: {
				page: 1,
				limit: 10,
			},
			searchForm: {
				name: "",
			},
		}
	},
	methods: {
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					if (this.modalType === 0) {
						addUser(this.form).then(() => {
							// 刷新列表数据
							this.getList()
						})
					} else {
						editUser(this.form).then(() => {
							// 刷新列表数据
							this.getList()
						})
					}
					this.handleClose()
				}
			})
		},
		onSearch() {
			this.getList()
		},
		// before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot
		// 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。
		handleClose() {
			this.$refs.form.resetFields() // 弹窗关闭时重置数据
			this.dialogVisible = false
		},
		cancel() {
			this.handleClose()
		},
		// 列表增删改查
		handleAdd() {
			this.modalType = 0
			this.dialogVisible = true
		},
		handleEdit(row) {
			this.modalType = 1
			this.dialogVisible = true
			// 注意需要对当前行数据进行深拷贝，不影响原始对象
			// 不能直接修改原数据，需要通过复制到新对象进行表单验证后请求后端进行修改的逻辑
			this.form = JSON.parse(JSON.stringify(row))
		},
		handleDelete(row) {
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					delUser({ id: row.id }).then(data => {
						this.$message({
							type: "success",
							message: "删除成功!",
						})
						// 刷新列表数据
						this.getList()
					})
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					})
				})
		},
		// 获取用户列表数据
		getList() {
			getUser({ params: { ...this.searchForm, ...this.pageData } }).then(
				({ data }) => {
					// console.log("data", data)
					this.tableData = data.list.filter(
						item => (item.sex = item.sex === 0 ? "男" : "女")
					)
					this.total = data.count ? data.count : 0 // 如果不存在就为0
				}
			)
		},
		handlePage(val) {
			this.pageData.page = val
			this.getList()
		},
	},
	mounted() {
		this.getList()
	},
}
</script>
<style lang="less" scoped>
.user-massage {
	height: 90%;
	.manage-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.el-form-item {
			margin-bottom: 0;
		}
		margin-bottom: 20px;
	}
	.common-table {
		position: relative;
		// height: calc(100% - 62px);
		height: 100%;
		.pager {
			position: absolute;
			bottom: 0;
			right: 20px;
		}
	}
}
</style>
